<template>
	<view class="index-container">
    <!-- 搜索组件 S-->
    		<mySearch v-if="searchShow"></mySearch>
    		<!-- 搜索组件 E-->
		<!-- 轮播图 S -->
        <swiper class="banner">
            <swiper-item v-for="item in banner" :key="item.id">
                <navigator url="/pkgGood/detail/detail?id=item.goods_id">
                    	<image class="img" mode="widthFix" :src="item.image_url"></image>
                </navigator>
            </swiper-item>
        </swiper>
        <!-- 轮播图 E -->
        <!-- 通知组件 S -->
        <u-notice-bar text="测试文字"></u-notice-bar>
        <!-- 通知组件 E-->
        <!-- 菜单区域 S -->
        <u-grid :border="false" col="5">
            <u-grid-item v-for="item in channel" :key="item.id" @click="goCate(item.id)">
                <image class="menuImg" mode="widthFix" :src="item.icon_url"></image>
                <text class="menuText">{{item.name}}</text>
            </u-grid-item>
        </u-grid>
        <!-- 菜单区域 E -->
        <!-- 商品分类 S -->
        <view class="goodContainer" v-for="item in categoryList" :key="item.id">
            <view class="titleBox">
            <text  @click="goCate(item.id)">{{item.name}}</text>
            </view>
            <!-- 商品列表 S-->
            <goodList :list="item.goodsList" :desc="true"></goodList>
            <!-- 商品列表 E-->
        </view>
        <!-- 商品分类 E -->
    </view>
</template>
<script>
	export default {
		name:'Index',
		data() {
			return {
				// 1. 定义相关数据变量
          banner:[],
          categoryList:[],
          channel:[],
          notice:'',
          searchShow:false
			}
		},
		onShow() {
      this.getIndexData()
      this.searchShow = true
    },
    onHide(){
       // 搜索组件关闭了
       this.searchShow = false
    },
		methods: {
      async getIndexData() {
        const res = await uni.$http.get('/index/appInfo')
         // 2.2 赋值变量
        this.banner = res.banner
        this.categoryList = res.categoryList
        this.channel = res.channel
        this.notice = res.notice.map((item,index)=>{
            return (index+1)+'.'+item.content+' '
        }).join('')
      },
       goCate(id){
           // 存储在本地
           uni.setStorageSync('cateId',id)
           uni.switchTab({
               url:'/pages/cate/cate'
           })
       }
    }
	}
</script>
<style lang="scss" scoped>
  .banner{
  	.img{
  		width: 100%;
  	}
  }
  .menuImg{
  	width: 80rpx;
  }
  .menuText {
  	color: #888;
  }
  .titleBox{
  	margin: 10rpx 0;
  	background-color: #fafafa;
  	padding: 20rpx 0;
  	box-sizing: border-box;
  	text-align: center;
  	text{
  		display: inline-block;
  		border-bottom: 4rpx solid #409eff;
  		color: #333;
  		font-size: 28rpx;
  	}
  }
  .goodContainer{
  	padding: 0 20rpx;
  }
</style>